<template>
  <div class="app-store">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2>App Store</h2>
      </div>

      <nav class="sidebar-nav">
        <div
          v-for="item in navItems"
          :key="item.id"
          class="nav-item"
          :class="{ active: currentTab === item.id }"
          @click="currentTab = item.id"
        >
          <span class="nav-icon">{{ item.icon }}</span>
          <span class="nav-label">{{ item.label }}</span>
        </div>
      </nav>

      <div class="sidebar-footer">
        <div class="account-info">
          <div class="account-avatar">👤</div>
          <div class="account-name">我的账户</div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 今天 Tab -->
      <div v-if="currentTab === 'today'" class="content-section">
        <div class="section-header">
          <h1 class="page-title">今天</h1>
          <p class="page-subtitle">{{ formattedDate }}</p>
        </div>

        <!-- 特色横幅 -->
        <div class="featured-banner">
          <div class="banner-image">
            <div class="banner-gradient"></div>
            <div class="banner-content">
              <div class="banner-tag">编辑精选</div>
              <h2 class="banner-title">探索精彩 App</h2>
              <p class="banner-description">发现能够改变您工作方式的强大应用</p>
            </div>
          </div>
        </div>

        <!-- 今日推荐 -->
        <div class="today-stories">
          <div
            v-for="story in todayStories"
            :key="story.id"
            class="story-card"
            @click="selectApp(story.app)"
          >
            <div class="story-image">
              <div class="story-app-icon">{{ story.app.icon }}</div>
            </div>
            <div class="story-info">
              <div class="story-label">{{ story.label }}</div>
              <h3 class="story-title">{{ story.title }}</h3>
              <p class="story-subtitle">{{ story.subtitle }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 游戏 Tab -->
      <div v-if="currentTab === 'games'" class="content-section">
        <div class="section-header">
          <h1 class="page-title">游戏</h1>
          <p class="page-subtitle">精彩游戏，尽在 Mac</p>
        </div>

        <div class="apps-grid">
          <div
            v-for="app in games"
            :key="app.id"
            class="app-card"
            @click="selectApp(app)"
          >
            <div class="app-icon">{{ app.icon }}</div>
            <div class="app-info">
              <h3 class="app-name">{{ app.name }}</h3>
              <p class="app-category">{{ app.category }}</p>
              <div class="app-rating">
                <span class="stars">{{ '⭐'.repeat(app.rating) }}</span>
                <span class="rating-count">{{ app.ratingCount }}</span>
              </div>
            </div>
            <button class="get-button">获取</button>
          </div>
        </div>
      </div>

      <!-- App Tab -->
      <div v-if="currentTab === 'apps'" class="content-section">
        <div class="section-header">
          <h1 class="page-title">App</h1>
          <p class="page-subtitle">为你精选的优秀应用</p>
        </div>

        <!-- 分类标签 -->
        <div class="category-tabs">
          <button
            v-for="category in appCategories"
            :key="category"
            class="category-tab"
            :class="{ active: selectedCategory === category }"
            @click="selectedCategory = category"
          >
            {{ category }}
          </button>
        </div>

        <div class="apps-grid">
          <div
            v-for="app in filteredApps"
            :key="app.id"
            class="app-card"
            @click="selectApp(app)"
          >
            <div class="app-icon">{{ app.icon }}</div>
            <div class="app-info">
              <h3 class="app-name">{{ app.name }}</h3>
              <p class="app-category">{{ app.category }}</p>
              <div class="app-rating">
                <span class="stars">{{ '⭐'.repeat(app.rating) }}</span>
                <span class="rating-count">{{ app.ratingCount }}</span>
              </div>
            </div>
            <button class="get-button">获取</button>
          </div>
        </div>
      </div>

      <!-- 搜索 Tab -->
      <div v-if="currentTab === 'search'" class="content-section">
        <div class="section-header">
          <h1 class="page-title">搜索</h1>
        </div>

        <div class="search-container">
          <div class="search-box">
            <span class="search-icon">🔍</span>
            <input
              v-model="searchQuery"
              type="text"
              placeholder="游戏、App、故事等"
              class="search-input"
            />
          </div>
        </div>

        <div v-if="searchQuery" class="search-results">
          <h2 class="results-title">搜索结果</h2>
          <div class="apps-list">
            <div
              v-for="app in searchResults"
              :key="app.id"
              class="app-list-item"
              @click="selectApp(app)"
            >
              <div class="app-icon-small">{{ app.icon }}</div>
              <div class="app-info-inline">
                <h3 class="app-name">{{ app.name }}</h3>
                <p class="app-category">{{ app.category }}</p>
              </div>
              <button class="get-button-small">获取</button>
            </div>
          </div>
        </div>

        <div v-else class="search-trending">
          <h2 class="trending-title">热门搜索</h2>
          <div class="trending-list">
            <div
              v-for="(keyword, index) in trendingKeywords"
              :key="index"
              class="trending-item"
              @click="searchQuery = keyword"
            >
              {{ keyword }}
            </div>
          </div>
        </div>
      </div>

      <!-- 更新 Tab -->
      <div v-if="currentTab === 'updates'" class="content-section">
        <div class="section-header">
          <h1 class="page-title">更新</h1>
          <p class="page-subtitle">让你的 App 保持最新状态</p>
        </div>

        <div class="updates-list">
          <div
            v-for="update in updates"
            :key="update.id"
            class="update-item"
          >
            <div class="app-icon">{{ update.app.icon }}</div>
            <div class="update-info">
              <h3 class="app-name">{{ update.app.name }}</h3>
              <p class="update-version">版本 {{ update.version }}</p>
              <p class="update-date">{{ update.date }}</p>
              <div class="update-notes">
                <p class="notes-title">新功能</p>
                <p class="notes-text">{{ update.notes }}</p>
              </div>
            </div>
            <button class="update-button">更新</button>
          </div>
        </div>
      </div>
    </div>

    <!-- App 详情模态框 -->
    <transition name="modal-fade">
      <div v-if="selectedAppDetail" class="app-detail-modal" @click="selectedAppDetail = null">
        <div class="detail-content" @click.stop>
          <button class="close-detail" @click="selectedAppDetail = null">✕</button>

          <div class="detail-header">
            <div class="detail-icon">{{ selectedAppDetail.icon }}</div>
            <div class="detail-title-section">
              <h2 class="detail-name">{{ selectedAppDetail.name }}</h2>
              <p class="detail-developer">{{ selectedAppDetail.developer || '开发者' }}</p>
              <div class="detail-rating">
                <span class="stars">{{ '⭐'.repeat(selectedAppDetail.rating) }}</span>
                <span class="rating-text">{{ selectedAppDetail.rating }}.0 • {{ selectedAppDetail.ratingCount }} 个评分</span>
              </div>
            </div>
            <button class="get-button-large">获取</button>
          </div>

          <div class="detail-description">
            <h3>关于此 App</h3>
            <p>{{ selectedAppDetail.description || '这是一款优秀的应用程序，为您带来卓越的使用体验。' }}</p>
          </div>

          <div class="detail-info-grid">
            <div class="info-item">
              <div class="info-label">提供者</div>
              <div class="info-value">{{ selectedAppDetail.developer || '开发者' }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">大小</div>
              <div class="info-value">{{ selectedAppDetail.size || '150 MB' }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">类别</div>
              <div class="info-value">{{ selectedAppDetail.category }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">兼容性</div>
              <div class="info-value">macOS 11.0 或更高版本</div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface App {
  id: string
  name: string
  icon: string
  category: string
  rating: number
  ratingCount: string
  developer?: string
  size?: string
  description?: string
}

const currentTab = ref('today')
const searchQuery = ref('')
const selectedCategory = ref('全部')
const selectedAppDetail = ref<App | null>(null)

const navItems = [
  { id: 'today', label: '今天', icon: '📱' },
  { id: 'games', label: '游戏', icon: '🎮' },
  { id: 'apps', label: 'App', icon: '📦' },
  { id: 'arcade', label: 'Arcade', icon: '🕹️' },
  { id: 'search', label: '搜索', icon: '🔍' },
  { id: 'updates', label: '更新', icon: '⬇️' },
]

const formattedDate = computed(() => {
  const date = new Date()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${month}月${day}日`
})

const todayStories = [
  {
    id: 1,
    label: 'APP 推荐',
    title: '提升效率的强大工具',
    subtitle: '让工作更轻松的精选应用',
    app: { id: 'notion', name: 'Notion', icon: '📝', category: '效率', rating: 5, ratingCount: '12.3K' }
  },
  {
    id: 2,
    label: '游戏推荐',
    title: '沉浸式游戏体验',
    subtitle: '探索最受欢迎的 Mac 游戏',
    app: { id: 'game1', name: 'Monument Valley', icon: '🎨', category: '游戏', rating: 5, ratingCount: '8.5K' }
  },
  {
    id: 3,
    label: '创意工具',
    title: '释放你的创造力',
    subtitle: '专业设计师的首选应用',
    app: { id: 'figma', name: 'Figma', icon: '🎨', category: '设计', rating: 5, ratingCount: '15.2K' }
  }
]

const games = [
  { id: 'game1', name: 'Monument Valley', icon: '🎨', category: '解谜', rating: 5, ratingCount: '8.5K' },
  { id: 'game2', name: 'Alto\'s Adventure', icon: '⛷️', category: '动作', rating: 5, ratingCount: '12.1K' },
  { id: 'game3', name: 'Stardew Valley', icon: '🌾', category: '模拟', rating: 5, ratingCount: '20.3K' },
  { id: 'game4', name: 'Among Us', icon: '👽', category: '多人', rating: 4, ratingCount: '45.7K' },
  { id: 'game5', name: 'Minecraft', icon: '⛏️', category: '沙盒', rating: 5, ratingCount: '89.2K' },
  { id: 'game6', name: 'Terraria', icon: '🗡️', category: '冒险', rating: 5, ratingCount: '32.4K' },
]

const apps = [
  { id: 'notion', name: 'Notion', icon: '📝', category: '效率', rating: 5, ratingCount: '12.3K' },
  { id: 'vscode', name: 'VS Code', icon: '💻', category: '开发者工具', rating: 5, ratingCount: '67.8K' },
  { id: 'figma', name: 'Figma', icon: '🎨', category: '设计', rating: 5, ratingCount: '15.2K' },
  { id: 'slack', name: 'Slack', icon: '💬', category: '商务', rating: 4, ratingCount: '23.5K' },
  { id: 'spotify', name: 'Spotify', icon: '🎵', category: '音乐', rating: 5, ratingCount: '128.9K' },
  { id: 'zoom', name: 'Zoom', icon: '📹', category: '效率', rating: 4, ratingCount: '45.2K' },
  { id: 'photoshop', name: 'Photoshop', icon: '🖼️', category: '图形和设计', rating: 5, ratingCount: '34.1K' },
  { id: 'final-cut', name: 'Final Cut Pro', icon: '🎬', category: '摄影与录像', rating: 5, ratingCount: '28.6K' },
]

const appCategories = ['全部', '效率', '开发者工具', '设计', '商务', '音乐', '图形和设计']

const trendingKeywords = ['Notion', 'Minecraft', 'Photoshop', 'VS Code', 'Final Cut Pro', 'Slack', 'Zoom']

const updates = [
  {
    id: 1,
    app: { id: 'notion', name: 'Notion', icon: '📝', category: '效率', rating: 5, ratingCount: '12.3K' },
    version: '2.28.0',
    date: '2天前',
    notes: '• 全新的数据库视图\n• 性能优化和错误修复\n• 支持更多模板'
  },
  {
    id: 2,
    app: { id: 'vscode', name: 'VS Code', icon: '💻', category: '开发者工具', rating: 5, ratingCount: '67.8K' },
    version: '1.85.0',
    date: '5天前',
    notes: '• 改进的 IntelliSense\n• 新增 Python 支持\n• UI 优化'
  }
]

const filteredApps = computed(() => {
  if (selectedCategory.value === '全部') {
    return apps
  }
  return apps.filter(app => app.category === selectedCategory.value)
})

const searchResults = computed(() => {
  if (!searchQuery.value) return []
  const query = searchQuery.value.toLowerCase()
  return [...apps, ...games].filter(app =>
    app.name.toLowerCase().includes(query) ||
    app.category.toLowerCase().includes(query)
  )
})

function selectApp(app: App) {
  selectedAppDetail.value = app
}
</script>

<style scoped>
.app-store {
  display: flex;
  height: 100%;
  background: #f5f5f7;
  overflow: hidden;
}

html.dark-mode .app-store {
  background: #1c1c1e;
}

/* 侧边栏 */
.sidebar {
  width: 240px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

html.dark-mode .sidebar {
  background: rgba(40, 40, 42, 0.85);
  border-right-color: rgba(255, 255, 255, 0.1);
}

.sidebar-header {
  padding: 52px 24px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html.dark-mode .sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sidebar-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0;
}

html.dark-mode .sidebar-header h2 {
  color: #f5f5f7;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  color: #1d1d1f;
}

html.dark-mode .nav-item {
  color: #f5f5f7;
}

.nav-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

html.dark-mode .nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-color);
  font-weight: 600;
}

html.dark-mode .nav-item.active {
  background: rgba(var(--accent-rgb), 0.2);
}

.nav-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.sidebar-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.account-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.account-info:hover {
  background: rgba(0, 0, 0, 0.04);
}

.account-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-rgb), 0.7));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.account-name {
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1f;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  overflow-y: auto;
  background: white;
}

html.dark-mode .main-content {
  background: #2c2c2e;
}

.content-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
}

.section-header {
  margin-bottom: 32px;
}

.page-title {
  font-size: 48px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 8px;
  letter-spacing: -1px;
}

html.dark-mode .page-title {
  color: #f5f5f7;
}

.page-subtitle {
  font-size: 20px;
  color: #86868b;
  margin: 0;
}

html.dark-mode .page-subtitle {
  color: #98989d;
}

/* 特色横幅 */
.featured-banner {
  margin-bottom: 48px;
  border-radius: 16px;
  overflow: hidden;
}

.banner-image {
  position: relative;
  height: 400px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  padding: 60px;
}

.banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
}

.banner-content {
  position: relative;
  z-index: 1;
  color: white;
}

.banner-tag {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.banner-title {
  font-size: 56px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -2px;
}

.banner-description {
  font-size: 20px;
  opacity: 0.95;
  margin: 0;
}

/* 今日故事 */
.today-stories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
}

.story-card {
  background: #f5f5f7;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark-mode .story-card {
  background: #3a3a3c;
}

.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

html.dark-mode .story-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.story-image {
  height: 240px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-app-icon {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.story-info {
  padding: 24px;
}

.story-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.story-title {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 8px;
}

html.dark-mode .story-title {
  color: #f5f5f7;
}

.story-subtitle {
  font-size: 14px;
  color: #86868b;
  margin: 0;
}

html.dark-mode .story-subtitle {
  color: #98989d;
}

/* 应用网格 */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.app-card {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

html.dark-mode .app-card {
  background: #3a3a3c;
  border-color: rgba(255, 255, 255, 0.1);
}

.app-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.12);
}

html.dark-mode .app-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.15);
}

.app-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #f5f5f7, #e5e5ea);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.app-info {
  flex: 1;
}

.app-name {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 4px;
}

html.dark-mode .app-name {
  color: #f5f5f7;
}

.app-category {
  font-size: 13px;
  color: #86868b;
  margin: 0 0 8px;
}

html.dark-mode .app-category {
  color: #98989d;
}

.app-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.stars {
  color: #ffcc00;
  letter-spacing: 1px;
}

.rating-count {
  color: #86868b;
}

.get-button {
  padding: 8px 20px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}

.get-button:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

/* 分类标签 */
.category-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.category-tab {
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.2s;
}

html.dark-mode .category-tab {
  background: rgba(255, 255, 255, 0.1);
  color: #f5f5f7;
}

.category-tab:hover {
  background: rgba(0, 0, 0, 0.08);
}

html.dark-mode .category-tab:hover {
  background: rgba(255, 255, 255, 0.15);
}

.category-tab.active {
  background: var(--accent-color);
  color: white;
}

/* 搜索 */
.search-container {
  margin-bottom: 32px;
}

.search-box {
  position: relative;
  max-width: 600px;
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: 0.5;
}

.search-input {
  width: 100%;
  padding: 14px 20px 14px 50px;
  background: #f5f5f7;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  transition: all 0.2s;
  color: #1d1d1f;
}

html.dark-mode .search-input {
  background: #3a3a3c;
  color: #f5f5f7;
}

.search-input:focus {
  background: white;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

html.dark-mode .search-input:focus {
  background: #2c2c2e;
}

.search-trending {
  margin-top: 32px;
}

.trending-title {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px;
}

.trending-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trending-item {
  padding: 10px 20px;
  background: #f5f5f7;
  border-radius: 20px;
  font-size: 14px;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.2s;
}

html.dark-mode .trending-item {
  background: #3a3a3c;
  color: #f5f5f7;
}

.trending-item:hover {
  background: #e5e5ea;
  transform: scale(1.05);
}

html.dark-mode .trending-item:hover {
  background: #48484a;
}

/* 搜索结果 */
.search-results {
  margin-top: 32px;
}

.results-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 20px;
}

.apps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

html.dark-mode .app-list-item {
  background: #3a3a3c;
  border-color: rgba(255, 255, 255, 0.1);
}

.app-list-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html.dark-mode .app-list-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.app-icon-small {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f5f5f7, #e5e5ea);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}

.app-info-inline {
  flex: 1;
}

.get-button-small {
  padding: 6px 18px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.get-button-small:hover {
  filter: brightness(1.1);
}

/* 更新列表 */
.updates-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.update-item {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

html.dark-mode .update-item {
  background: #3a3a3c;
  border-color: rgba(255, 255, 255, 0.1);
}

.update-info {
  flex: 1;
}

.update-version {
  font-size: 13px;
  color: #86868b;
  margin: 4px 0;
}

.update-date {
  font-size: 12px;
  color: #86868b;
  margin: 0 0 12px;
}

.update-notes {
  margin-top: 12px;
}

.notes-title {
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 8px;
}

.notes-text {
  font-size: 13px;
  color: #86868b;
  margin: 0;
  white-space: pre-line;
  line-height: 1.6;
}

.update-button {
  padding: 8px 20px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  height: fit-content;
  transition: all 0.2s;
}

.update-button:hover {
  filter: brightness(1.1);
}

/* App详情模态框 */
.app-detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 40px;
}

.detail-content {
  position: relative;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  background: white;
  border-radius: 20px;
  padding: 40px;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

html.dark-mode .detail-content {
  background: #2c2c2e;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.close-detail {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.close-detail:hover {
  background: rgba(0, 0, 0, 0.1);
}

.detail-header {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.detail-icon {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #f5f5f7, #e5e5ea);
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.detail-title-section {
  flex: 1;
}

.detail-name {
  font-size: 32px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 8px;
}

html.dark-mode .detail-name {
  color: #f5f5f7;
}

.detail-developer {
  font-size: 16px;
  color: var(--accent-color);
  margin: 0 0 12px;
}

.detail-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #86868b;
}

.rating-text {
  color: #86868b;
}

.get-button-large {
  padding: 12px 32px;
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  height: fit-content;
}

.get-button-large:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

.detail-description {
  margin-bottom: 32px;
}

.detail-description h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px;
}

.detail-description p {
  font-size: 15px;
  color: #1d1d1f;
  line-height: 1.6;
  margin: 0;
}

html.dark-mode .detail-description h3 {
  color: #f5f5f7;
}

html.dark-mode .detail-description p {
  color: #f5f5f7;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-label {
  font-size: 12px;
  font-weight: 600;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 14px;
  color: #1d1d1f;
}

html.dark-mode .info-value {
  color: #f5f5f7;
}

/* 模态框动画 */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-from .detail-content,
.modal-fade-leave-to .detail-content {
  transform: scale(0.9);
}

/* 滚动条使用全局样式 */

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }

  .content-section {
    padding: 32px 24px;
  }

  .page-title {
    font-size: 36px;
  }

  .banner-image {
    height: 300px;
    padding: 40px;
  }

  .banner-title {
    font-size: 40px;
  }

  .today-stories {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .app-store {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .sidebar-nav {
    display: flex;
    overflow-x: auto;
    padding: 8px 16px;
  }

  .nav-item {
    white-space: nowrap;
    padding: 8px 16px;
  }

  .apps-grid {
    grid-template-columns: 1fr;
  }

  .detail-info-grid {
    grid-template-columns: 1fr;
  }
}
</style>

